<template>
    <view class="page-box">
        <header class="header"></header>
        <section class="section">
            <view class="form-box">
                <view class="form-item">
                    <view class="title" style="margin-bottom: 16rpx;">回传材料入口：</view>
                    <view class="tip row verCenter" style="margin-bottom: 16rpx;"><text class="iconfont icon-a-tubiaochangyongsousuo17"></text><text class="t1">温馨提示：需要邮寄材料，请及时邮寄</text></view>
                    <view class="upload-list">
                        <view class="box column rowCenter verCenter">
                            <view class="area column rowCenter verCenter" @click="chooseImageChange(1)">
                                <template v-if="isVideo(form.documentation_backhaul_1)">
                                    <video :src="form.documentation_backhaul_1" object-fit="cover"></video>
                                </template>
                                <template v-else-if="isImage(form.documentation_backhaul_1)">
                                    <image :src="form.documentation_backhaul_1" mode="aspectFill"></image>
                                </template>
                                <template v-else-if="isPdf(form.documentation_backhaul_1)">
                                    <image class="pdf" src="@/static/pdf.png" mode="aspectFit"></image>
                                </template>
                                <view class="delete row rowCenter verCenter" @click.stop="deletePic(1)" v-if="form.documentation_backhaul_1">
                                    <text class="iconfont icon-shanchu"></text>
                                </view>
                            </view>
                        </view>
                        <view class="box column rowCenter verCenter">
                            <view class="area column rowCenter verCenter" @click="chooseImageChange(2)">
                                <template v-if="isVideo(form.documentation_backhaul_2)">
                                    <video :src="form.documentation_backhaul_2" object-fit="cover"></video>
                                </template>
                                <template v-else-if="isImage(form.documentation_backhaul_2)">
                                    <image :src="form.documentation_backhaul_2" mode="aspectFill"></image>
                                </template>
                                <template v-else-if="isPdf(form.documentation_backhaul_2)">
                                    <image class="pdf" src="@/static/pdf.png" mode="aspectFit"></image>
                                </template>
                                <view class="delete row rowCenter verCenter" @click.stop="deletePic(2)" v-if="form.documentation_backhaul_2">
                                    <text class="iconfont icon-shanchu"></text>
                                </view>
                            </view>
                        </view>
                        <view class="box column rowCenter verCenter">
                            <view class="area column rowCenter verCenter" @click="chooseImageChange(3)">
                                <template v-if="isVideo(form.documentation_backhaul_3)">
                                    <video :src="form.documentation_backhaul_3" object-fit="cover"></video>
                                </template>
                                <template v-else-if="isImage(form.documentation_backhaul_3)">
                                    <image :src="form.documentation_backhaul_3" mode="aspectFill"></image>
                                </template>
                                <template v-else-if="isPdf(form.documentation_backhaul_3)">
                                    <image class="pdf" src="@/static/pdf.png" mode="aspectFit"></image>
                                </template>
                                <view class="delete row rowCenter verCenter" @click.stop="deletePic(3)" v-if="form.documentation_backhaul_3">
                                    <text class="iconfont icon-shanchu"></text>
                                </view>
                            </view>
                        </view>
                        <view class="box column rowCenter verCenter">
                            <view class="area column rowCenter verCenter" @click="chooseImageChange(4)">
                                <template v-if="isVideo(form.documentation_backhaul_4)">
                                    <video :src="form.documentation_backhaul_4" object-fit="cover"></video>
                                </template>
                                <template v-else-if="isImage(form.documentation_backhaul_4)">
                                    <image :src="form.documentation_backhaul_4" mode="aspectFill"></image>
                                </template>
                                <template v-else-if="isPdf(form.documentation_backhaul_4)">
                                    <image class="pdf" src="@/static/pdf.png" mode="aspectFit"></image>
                                </template>
                                <view class="delete row rowCenter verCenter" @click.stop="deletePic(4)" v-if="form.documentation_backhaul_4">
                                    <text class="iconfont icon-shanchu"></text>
                                </view>
                            </view>
                        </view>
                        <view class="box column rowCenter verCenter">
                            <view class="area column rowCenter verCenter" @click="chooseImageChange(5)">
                                <template v-if="isVideo(form.documentation_backhaul_5)">
                                    <video :src="form.documentation_backhaul_5" object-fit="cover"></video>
                                </template>
                                <template v-else-if="isImage(form.documentation_backhaul_5)">
                                    <image :src="form.documentation_backhaul_5" mode="aspectFill"></image>
                                </template>
                                <template v-else-if="isPdf(form.documentation_backhaul_5)">
                                    <image class="pdf" src="@/static/pdf.png" mode="aspectFit"></image>
                                </template>
                                <view class="delete row rowCenter verCenter" @click.stop="deletePic(5)" v-if="form.documentation_backhaul_5">
                                    <text class="iconfont icon-shanchu"></text>
                                </view>
                            </view>
                        </view>
                        <view class="box column rowCenter verCenter">
                            <view class="area column rowCenter verCenter" @click="chooseImageChange(6)">
                                <template v-if="isVideo(form.documentation_backhaul_6)">
                                    <video :src="form.documentation_backhaul_6" object-fit="cover"></video>
                                </template>
                                <template v-else-if="isImage(form.documentation_backhaul_6)">
                                    <image :src="form.documentation_backhaul_6" mode="aspectFill"></image>
                                </template>
                                <template v-else-if="isPdf(form.documentation_backhaul_6)">
                                    <image class="pdf" src="@/static/pdf.png" mode="aspectFit"></image>
                                </template>
                                <view class="delete row rowCenter verCenter" @click.stop="deletePic(6)" v-if="form.documentation_backhaul_6">
                                    <text class="iconfont icon-shanchu"></text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="title" style="margin-bottom: 16rpx;margin-top: 24rpx;">快递单截图：</view>
                    <view class="upload-list">
                        <view class="box column rowCenter verCenter">
                            <view class="area column rowCenter verCenter" @click="chooseImageChange(7)">
                                <template v-if="isVideo(form.documentation_express_screenshot)">
                                    <video :src="form.documentation_express_screenshot" object-fit="cover"></video>
                                </template>
                                <template v-else-if="isImage(form.documentation_express_screenshot)">
                                    <image :src="form.documentation_express_screenshot" mode="aspectFill"></image>
                                </template>
                                <template v-else-if="isPdf(form.documentation_express_screenshot)">
                                    <image class="pdf" src="@/static/pdf.png" mode="aspectFit"></image>
                                </template>
                                <template v-else-if="isZip(form.documentation_express_screenshot)">
                                    <image class="pdf" src="http://www.szxlyc.com/uploads/product/20240929/Vte1iaLoaWWe5bZ8fpvjqBw1E0H8YWTcjjMKb6cn.png" mode="aspectFit"></image>
                                </template>
                                <view class="delete row rowCenter verCenter" @click.stop="deletePic(7)" v-if="form.documentation_express_screenshot">
                                    <text class="iconfont icon-shanchu"></text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </section>
        <view class="btn row rowCenter verCenter" @click="submit()">提交</view>
    </view>
</template>

<script>
    import { API } from '@/util/api.js';
    export default {
        data() {
            return {
                form: {
                    "order_id": "",
                    "documentation_backhaul_1": "",
                    "documentation_backhaul_2": "",
                    "documentation_backhaul_3": "",
                    "documentation_backhaul_4": "",
                    "documentation_backhaul_5": "",
                    "documentation_backhaul_6": "",
                    "documentation_express_screenshot": ""
                }
            };
        },
        onLoad(options) {
            this.form.order_id = options.order_id;
            this.getOrderAddedInfo();
        },
        methods: {
            /**
             * 获取进件已经填写的资料
             */
            getOrderAddedInfo() {
                this.request(API.getOrderAddedInfo, 'GET', { order_id: this.form.order_id }, true).then(res => {
                    Object.keys(res).forEach(key => {
                        if (this.form.hasOwnProperty(key)) {
                            this.form[key] = res[key];
                        }
                    });
                });
            },
            /**
             * 上传图片
             * @param {Object} elem
             */
            chooseImageChange(elem) {
                uni.chooseFile({
                    count: 1, // 允许选择的文件数量，默认值为 1
                    type: 'all', // 文件类型，可选值有 image、video、audio、all
                    extension: ['png', 'jpg', 'jpeg', 'mp4', 'pdf', 'rar', 'zip'], // 允许的文件扩展名
                    success: (res) => {

                        // 显示loading
                        uni.showLoading({
                            title: '上传中...'
                        });

                        // 获取选择的图片路径数组
                        const tempFilePaths = res.tempFilePaths;

                        //上传到服务器
                        uni.uploadFile({
                            url: API.uploadImage,
                            filePath: tempFilePaths[0],
                            name: 'file',
                            formData: {
                                'source': 'appUser'
                            },
                            success: uploadFileRes => {
                                console.log('服务器上传图片成功：', uploadFileRes);
                                uni.hideLoading();
                                let data = JSON.parse(uploadFileRes.data);
                                if (data.code === 0) {
                                    const formMapping = {
                                        1: "documentation_backhaul_1",
                                        2: "documentation_backhaul_2",
                                        3: "documentation_backhaul_3",
                                        4: "documentation_backhaul_4",
                                        5: "documentation_backhaul_5",
                                        6: "documentation_backhaul_6",
                                        7: "documentation_express_screenshot"
                                    };
                                    // 根据 elem 更新相应的表单数据
                                    if (formMapping[elem]) {
                                        this.$set(this.form, formMapping[elem], data.data);
                                    } else {
                                        console.warn('未识别的 elem:', elem);
                                    }
                                    this.$forceUpdate();
                                } else {
                                    uni.showToast({
                                        title: data.msg,
                                        icon: 'none'
                                    });
                                }
                            },
                            fail: () => {
                                uni.hideLoading();
                                uni.showToast({
                                    title: '上传图片失败',
                                    icon: 'none'
                                });
                            }
                        });
                    }
                });
            },
            /**
             * 删除图片
             * @param {Object} elem
             */
            deletePic(elem) {
                const formMapping = {
                    1: "documentation_backhaul_1",
                    2: "documentation_backhaul_2",
                    3: "documentation_backhaul_3",
                    4: "documentation_backhaul_4",
                    5: "documentation_backhaul_5",
                    6: "documentation_backhaul_6",
                    7: "documentation_express_screenshot"
                }

                // 检查 elem 是否在映射中，并将对应的表单字段设置为空
                if (formMapping.hasOwnProperty(elem)) {
                    this.$set(this.form, formMapping[elem], '');
                } else {
                    console.warn('未识别的 elem:', elem);
                }
            },
            /**
             * 判断文件是否为视频
             * @param {Object} file
             */
            isVideo(file) {
                if (file) {
                    return file.endsWith('.mp4') || file.endsWith('.mov') || file.endsWith('.avi'); // 可以根据需要增加其他视频格式
                }
            },
            /**
             * 判断文件是否为压缩文件
             * @param {Object} file
             */
            isZip(file) {
                if (file) {
                    return file.endsWith('.rar') || file.endsWith('.zip'); // 可以根据需要增加其他视频格式
                }
            },
            /**
             * 判断文件是否为图片
             * @param {Object} file
             */
            isImage(file) {
                if (file) {
                    return (
                        file.endsWith('.jpg') ||
                        file.endsWith('.jpeg') ||
                        file.endsWith('.png') ||
                        file.endsWith('.gif') ||
                        file.endsWith('.bmp')
                    );
                }
            },
            /**
             * 判断文件是否为PDF
             * @param {Object} file
             */
            isPdf(file) {
                if (file) {
                    return file.endsWith('.pdf');
                }
            },
            submit() {
                this.request(API.submitRequestFundsAddDocmentInfo, 'POST', this.form, true).then(res => {
                    if (res.code === 0) {
                        uni.showToast({
                            title: '提交成功',
                            icon: 'success',
                            duration: 2000
                        });

                        // 等待2秒后再回到上一页
                        setTimeout(() => {
                            uni.redirectTo({
                                url: "/pages/order/selfDetail?order_id=" + this.form.order_id
                            })
                        }, 2000);
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                }).catch(error => {
                    console.error('提交失败:', error);
                    uni.showToast({
                        title: '提交失败，请重试',
                        icon: 'none'
                    });
                });
            }
        }
    };
</script>

<style scoped lang="scss">
    @import '@/assets/css/order/requestFundsAddInfo.scss';
</style>